Exemple : API HTML5
Produit : CODESYS Visualization
Le HTML5_DemoControls.project
exemple montre comment utiliser des contrôles HTML5 simples. Il contient les fichiers supplémentaires nécessaires pour afficher les contrôles en tant qu'éléments de visualisation dans CODESYS visualisation.
Description
L'exemple de projet contient divers contrôles HTML5 configurés. La fonctionnalité des contrôles HTML5 est facile à reconnaître en mode en ligne.
Les commandes ne sont utilisées qu'à des fins de démonstration. C'est pourquoi ils ont un look simple.
Important
Si un élément ne peut pas être téléchargé sur le contrôleur en raison d'une signature manquante, un avertissement s'affiche dans la vue des messages (Visualisation catégorie). Cliquez sur bouton et confirmez la boîte de dialogue suivante si vous faites confiance à cet élément.
Informations Complémentaires
Bouton de démonstration HTML5
Ce contrôle montre comment évaluer les actions de la souris via un contrôle HTML5 et les transmettre à IEC via la configuration d'entrée. Vous pouvez exécuter les événements d'entrée configurés OnMouseDown
, OnMouseUp
, et OnMouseMove
.
Combobox de démonstration HTML5
Cette commande montre comment utiliser une énumération IEC dans une zone de liste déroulante. L'exemple montre comment interroger des informations de type (getTypeDesc
) à partir d'une variable. Il montre également comment transférer et utiliser des couleurs et des polices.
Image de démonstration HTML5
Ce contrôle montre comment utiliser des images dans un contrôle HTML5.
Tableau de démonstration HTML5
Ce contrôle montre comment afficher et modifier une matrice IEC dans un contrôle HTML5. Les données sont transmises de manière optimisée. Seule une zone spécifique est transmise. Cette solution est également possible pour les réseaux plus grands comportant de nombreuses lignes. Vous pouvez modifier les valeurs des cellules du tableau et, par conséquent, modifier les valeurs des variables du tableau.
Tableau de démonstration HTML5 sans plage de défilement
Ce contrôle montre comment afficher et modifier une matrice IEC dans un contrôle HTML5. L'ensemble du tableau est transféré lorsqu'une valeur du tableau a changé. Vous pouvez modifier les valeurs des cellules et, par conséquent, modifier les valeurs des variables du tableau.
Champ de texte de démonstration HTML5
Cette commande montre comment différents types de valeurs scalaires IEC peuvent être gérés dans les deux sens (lecture/écriture).
Jauge à beignets de démonstration HTML5
Ce contrôle montre comment utiliser un élément HTML5 avec la bibliothèque d3. La taille variable de la zone du cadre est transférée directement via la largeur et la hauteur. Il se compose d'un écran et d'un bouton pour le faire glisser.
Jauge à barres de démonstration HTML5
Ce contrôle montre comment utiliser un élément HTML5 avec la bibliothèque d3. La taille variable de la zone du cadre est transférée directement via la largeur et la hauteur. Un élément de barre modifiable s'affiche.
Configuration système requise et restrictions
Système de programmation | CODESYS Development System (version 3.5.18.0 ou supérieure) |
Système d'exécution | CODESYS Control Win (version 3.5.18.0) |
Composants complémentaires | CODESYS Visualization (version 4.5.0.0 ou supérieure) |
Avis
TÉLÉCHARGER Projet